<template>
  <div>
    <el-menu :default-active="activeIndex2"
             class="el-menu-demo"
             mode="horizontal"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item index="0"><router-link to="/welcome">主页</router-link></el-menu-item>
      <el-menu-item index="1"><router-link to="/user/administrator">管理员</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/book/book">书籍</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="/user/member">会员</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="/book/book-link">借阅一览</router-link></el-menu-item>
      <el-submenu index="5">
        <template slot="title">当前用户:{{loginUser.name}}</template>
        <el-menu-item index="5-1" @click="logout">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    <section class="jumbotron text-center">
      <div class="container">
        <h1>hermit图书管理系统管理员界面</h1>
        <p class="lead text-muted" style="height: 50vh">
          噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。
        </p>
        <p>
          <a class="btn btn-dark my-2 p-3 font-weight-bold"><router-link to="/user/administrator">管理员</router-link></a>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a class="btn btn-dark my-2 p-3 font-weight-bold"><router-link to="/book/book">书籍</router-link></a>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a class="btn btn-dark my-2 p-3 font-weight-bold"><router-link to="/user/member">会员</router-link></a>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a class="btn btn-dark my-2 p-3 font-weight-bold"><router-link to="/book/book-link">借阅一览</router-link></a>
        </p>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'welcome',
  data () {
    return {
      loginUser:{},
    }
  },
  mounted:function (){
    let _this = this;
    //重新加载js
    $.getScript('ace/assets/js/ace.min.js');
    _this.loginUser = Tool.getLoginUser();
  },
  methods:{
    login(){
      this.$router.push("/admin")
    },
    /**
     * 菜单激活样式 id为当前点击的菜单的id
     * @yangfan
     */
    activeSidebar: function (id) {
      // 兄弟菜单去掉active样式，自身增加active样式
      $("#" + id).siblings().removeClass("active");
      $("#" + id).siblings().find("li").removeClass("active");
      $("#" + id).addClass("active");

      // 如果有父菜单，父菜单的兄弟菜单去掉open active，父菜单增加open active
      let parentLi = $("#" + id).parents("li");
      if (parentLi) {
        parentLi.siblings().removeClass("open active");
        parentLi.siblings().find("li").removeClass("active");
        parentLi.addClass("open active");
      }
    },

    logout(){
      Tool.setLoginUser(null);
      this.$router.push("/login");
    },
  }
}
</script>
